<template>
  <div>
    <con-title :topTitle="topTitle"></con-title>

    <el-card class="box-card">
      <el-form label-width="80px">
        <el-form-item label="群组名称:">
          <el-input
            v-model.trim="query.keyword"
            style="width: 300px"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="btn"
            @click="getData"
            >搜索</el-button
          >
          <span style="margin-left: 10px">搜索结果：{{ total }}</span>
          <!-- 新建群组 -->
          <el-button type="primary" style="float: right" @click="handleAdd"
            >新建群组<i class="el-icon-upload el-icon-plus"></i
          ></el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-table :data="groupList" style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="groupName" label="群组名称" width="180">
        </el-table-column>
        <el-table-column prop="nodeNums" label="传感器节点数量" width="180">
        </el-table-column>
        <el-table-column prop="onlineNums" label="在线设备数量">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="showDialog(scope.row.id, scope.row.groupName)"
              >重命名</el-button
            >
            <el-button type="text" size="small" @click="delGroup(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <el-dialog
        :title="editId == '' ? '添加群组信息' : '修改群组信息'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="群组名称" prop="groupName">
            <el-input
              type="input"
              v-model="ruleForm.groupName"
              placeholder="请输入群组名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleOK">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="goPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $groupList, $groupAdd, $groupEdit, $groupDel } from "@/api";
export default {
  components: { ConTitle },
  name: "groupList",
  data() {
    return {
      input: "",
      groupList: [],
      topTitle: {
        type: "设备", //type如果有内容就会显示上一级
        text: "节点群组",
        msg: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。",
      },
      total: 0, //总条数
      query: {
        currPage: 1, //页码
        pageSize: 5, //当前页有多少条数据
        keyword: "",
      },
      dialogVisible: false, //弹窗是否显示
      ruleForm: {
        groupName: "",
      }, //需要提交的表单项
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      }, //需要验证的表单项
      editId: "", //修改的id   为空 就是添加  ，有值 就是修改
    };
  },
  methods: {
    getGroupList() {
      $groupList(this.query).then((res) => {
        // console.log(res);
        this.groupList = res.data.data;
        this.total = res.data.total;
      });
    },
    getData() {
      this.query.currPage = 1;
      console.log(this.groupList, this.total);
      this.getGroupList();
    },
    //当页面上显示的数据条数发生变化时会触发这个函数
    handleSizeChange(count) {
      // console.log("页面的条数发生变化了", count);
      //将页面显示条数赋值给 pageSize
      this.query.pageSize = count;
      this.query.currPage = 1;
      //重新获取数据
      this.getGroupList();
    },
    //翻页会触发的函数
    handleCurrentChange(page) {
      // console.log("翻页了", page);
      // 修改当前页的页码
      this.query.currPage = page;
      //重新获取数据
      this.getGroupList();
    },
    // 点击 弹窗的确定按钮触发的函数
    handleAdd() {
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },
    // 点击 弹窗的确定按钮触发的函数
    handleOK() {
      console.log("弹窗需要关闭，添加一条记录");
      //验证 表单的input框是否添加了数据
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log("验证成功");
          if (this.editId !== "") {
            //修改
            this.editItem();
          } else {
            //添加
            this.addItem();
          }
        } else {
          console.log("error");
          return false;
        }
      });
    },
    //添加
    addItem() {
      //2.调用添加接口
      $groupAdd({ groupName: this.ruleForm.groupName }).then((res) => {
        console.log(res);
        if (res.data.msg == "success") {
          //成功添加
          //1.关闭弹窗
          this.dialogVisible = false;
          this.getGroupList();
        }
      });
    },
    //修改  $groupEdit
    editItem() {
      $groupEdit({ id: this.editId, groupName: this.ruleForm.groupName }).then(
        (res) => {
          console.log(res);
          if (res.data.msg == "success") {
            //成功添加
            //1.关闭弹窗
            this.dialogVisible = false;
            this.getGroupList();
          }
        }
      );
    },

    //显示一下修改页面
    showDialog(id, groupName) {
      this.dialogVisible = true;
      //给文本框赋值
      this.ruleForm.groupName = groupName;
      this.editId = id;
    },

    //删除
    delGroup(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $groupDel({ id: id }).then((res) => {
            console.log(res);
            if (res.data.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取数据
              this.getGroupList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getGroupList();
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 10px;
}
.inp {
  width: 200px;
}
.btn {
  margin-left: 10px;
}
.goPage {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>